<!--
 @description 楼层配置列表
 @fileName index.vue
 @author zengqiongying
 @created 2022/12/15 15:47:28
-->
<template>
  <div class="floor_table">
    <div class="f-title">
      <div>
        <el-alert
          :title="`可拖动楼层进行排序${[0,1,2].includes(pageData.id)?'，一层与二层不可调整顺序':''}`"
          type="info"
          show-icon
          :closable="false"
        />
      </div>
      <el-button v-if="editable && createAble && hasPermission('add') " type="primary" size="mini" @click="handleEdit">新增楼层</el-button>
    </div>
    <div class="table-list-box">
      <el-table
        style="width: 100%"
        :data="tableData"
        header-row-class-name="table-list-header"
        highlight-current-row
        border
        row-key="id"
        :row-class-name="tableRowClassName"
      >
        <el-table-column prop="name" label="楼层名称" />
        <el-table-column label="楼层类型">
          <template v-slot="{row}">
            {{ row.type | filterFloorType }}
          </template>
        </el-table-column>
        <el-table-column label="楼层布局">
          <template v-slot="{row}">
            {{ row.layOut | filterFloorLayout(row.type) }}
          </template>
        </el-table-column>
        <el-table-column v-if="![0,1,2].includes(pageData.id)" label="是否锚点">
          <template v-slot="{row}">
            {{ [1,'1'].includes(row.isAnchor)?'是':'否' }}
          </template>
        </el-table-column>
        <el-table-column v-if="[0,1,2].includes(pageData.id)" label="是否显示名称">
          <template v-slot="{row}">
            <span v-if="!['home_page_banner', 'home_page_navigation'].includes(row.type)">
              {{ [1,'1'].includes(row.isShowTitle)?'是':'否' }}
            </span>
          </template>
        </el-table-column>
        <el-table-column v-if="editable && (hasPermission('edit') || hasPermission('del'))" label="操作" width="130">
          <template v-slot="{row,$index}">
            <el-button type="text" @click="handleEdit(row)">编辑</el-button>
            <el-button v-if="!['home_page_banner', 'home_page_navigation'].includes(row.type)" type="text" class="btn-del" @click="handleDel(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { parseTime } from '@/utils'
import Sortable from 'sortablejs'
import { getFloorList, delFloorConf, updateFloorSort, queryFloorDetail, queryRefCategoryList } from '@/api/floorConf'
import { FLOOR_TYPE, FLOOR_LAYOUT } from './constData'
import { queryBtnList } from '@/api/permissions'
export default {
  name: 'FloorConfigList',
  filters: {
    fiterTime: parseTime,
    filterFloorType(val) {
      return FLOOR_TYPE[val] || ''
    },
    filterFloorLayout(val, type) {
      const list = FLOOR_LAYOUT.filter(v => {
        return v.dictCode === val && v.type === type
      })
      return list.length ? list[0].dictName : ''
    }
  },
  props: {
    pageData: {
      // 页面数据： id = 0 APP首页, 1 PAD首页， 2 WEB首页
      type: Object,
      default: () => {},
      require: true
    },
    editable: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      tableData: [], // 表格数据
      buttons: []
    }
  },
  computed: {
    createAble() {
      let flag = true
      if (this.pageData && this.pageData.type === 'product') {
        flag = this.tableData.length === 0
      }
      return flag
    }

  },
  created() {
    this.getBtnsList()
    this.initTableData()
  },
  mounted() {
    this.$nextTick(() => {
      this.rowDrop()
    })
  },
  methods: {
    getBtnsList() {
      const menuCode = this.$route.query.menuCode
      if (!menuCode) return
      const buttonGroupCode = 'floorConf'
      queryBtnList({ menuCode, buttonGroupCode }).then(res => {
        // res.data.groovyList
        this.buttons = (res.data && res.data.groovyList) || []
      })
    },
    hasPermission(code) {
      if (!this.isProduction) return true
      return this.buttons.filter(v => v.buttonCode === code).length > 0
    },
    initTableData() {
      getFloorList(this.pageData.id).then(res => {
        this.tableData = (res.data && res.data.records) || []
      })
    },
    tableRowClassName({ row }) {
      // 仅导航和banner不能调整排序
      const clsName = ['home_page_banner', 'home_page_navigation'].includes(row.type) ? 'disDrop' : 'allowDrop'
      return clsName
    },
    // 楼层编辑
    handleEdit(row) {
      if (row && row.id) {
        queryRefCategoryList(row.id).then(res => {
          const categoryDTOList = (res.data && res.data.records) || []
          const editData = {
            ...row, ...{ categoryDTOList }
          }
          this.$emit('edit', editData)
        })
      } else {
        this.$emit('edit', '')
      }
    },
    // 删除行
    handleDel(row) {
      this.$confirm(`此操作将删除楼层【${row.name}】,是否继续`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delFloorConf(row.id).then(res => {
          if (res.success === 1) {
            this.$message({
              message: res.msg || '删除成功',
              type: 'success'
            })
            this.initTableData()
          }
        })
      })
    },
    // 行拖拽排序
    rowDrop() {
      const el = document.querySelector('.floor_table .el-table__body-wrapper tbody')
      Sortable.create(el, {
        disabled: false, // 是否禁用拖拽
        handle: '.allowDrop', // 指定行可拖拽
        draggable: '.allowDrop', // 指定行需排序
        ghostClass: 'selected-highlight', // 拖拽样式
        animation: 300, // 拖拽延时
        // 拖拽开始
        onStart: (e) => {},
        // 拖拽移动
        onMove: (e) => {},
        // 拖拽结束
        onEnd: ({ newIndex, oldIndex }) => {
          if (newIndex === oldIndex) return
          // 取原位置的数据的排序号
          let newSortNo = this.tableData[newIndex].sort
          const id = this.tableData[oldIndex].id
          if (newIndex > oldIndex) {
            newSortNo += 1
          }
          const currRow = this.tableData.splice(oldIndex, 1)[0]
          this.tableData.splice(newIndex, 0, currRow)
          this.handleSort(id, newSortNo)
        }
      })
    },
    handleSort(id, newSortNo) {
      updateFloorSort({ id, newSortNo }).then(res => {
        if (res.success === 1) {
          this.initTableData()
        }
      })
    }
  }
}

</script>
<style lang='scss' scoped>
  .f-title{
    display:flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    .msg{
      color: #999;
    }
  }

  /deep/ .el-alert{
    padding:0;
    color: #999;
    .el-alert__title{
      font-size: 12px;
    }
  }
  /deep/ .btn-del{
    margin-left: 10px !important;
  }
</style>
